<template>
  <div class="form_item-json_param_arr">
    <list :data="this_value" :cols="cols_config">
      <template #action="{row,index}">
        <el-button @click="to_up(index)" size="small">上移</el-button>
        <el-button @click="edit_row(index)" size="small">编辑</el-button>
        <el-button @click="del_row(index)" type="danger" size="small">删除</el-button>
      </template>
    </list>
    <div v-if="!is_info">
      <input type="hidden" :name="name" :value="value">
      <forms ref="forms" :config="this_config" remove_name="1" :btns="[]" ></forms>
      <el-button @click="add_row">{{ btn_text||'提交' }}</el-button>
    </div>
  </div>
</template>

<script>
import {confirm} from "@/js/tool.js";

export default {
  _title_: '自定义参数集',
  _can_config_: true,
  _can_form_param_: true,
  name: "json_param_arr",
  props: ['name', 'value', 'config', 'is_info', 'btn_text', 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    return {
      need_display: true,
      this_value: this.decode_value(),
      now_index: -1,
      this_config: [],
    }
  },
  methods: {
    decode_value(){
      let res = [];
      try {
        res = JSON.parse(this.value);
      } catch (e) {}
      if (Object.prototype.toString.call(res) !== '[object Array]') res = [];
      return res;
    },
    add_row(){
      let arr = {};
      if (this.$refs.forms.validate() !== true) return this.tips('存在参数不合规范', 3);
      Object.values(this.this_config).forEach((row)=>{
        arr[row.name] = row.value;
      })
      if (this.now_index>=0){
        this.this_value[this.now_index] = arr;
      }else {
        this.this_value.push(arr);
      }
      this.now_index = -1;
      this.update_value(JSON.stringify(this.this_value));
    },
    update_value(v){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
    json_decode(v){
      try {
        return JSON.parse(v);
      } catch (e) {
        return {};
      }
    },
    to_up(i){
      if (i<=0) return;
      this.this_value[i-1] = this.this_value.splice(i,1,this.this_value[i-1])[0];
      this.update_value(JSON.stringify(this.this_value));
    },
    async edit_row(i){
      try {
        await confirm('是否编辑该条数据');
      } catch (e) {
        return console.log('confirm 拒绝', e);
      }
      this.now_index = i;
      let value_row = this.this_value[i];
      Object.values(this.this_config).forEach((row)=>{
        row.value = value_row[row.name];
      })
    },
    async del_row(i){
      try {
        await confirm('是否确定删除该条数据');
      } catch (e) {
        return console.log('confirm 拒绝', e);
      }
      this.this_value.splice(i,1);
      this.update_value(JSON.stringify(this.this_value));
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.decode_value();
    }
  },
  computed: {
    cols_config(){
      let cols = [], config={};
      if (typeof(this.config)=='string') {
        config = this.json_decode(this.config) || {};
      }else {
        config = this.config || {};
      }
      this.this_config = config;
      Object.keys(config).forEach((k)=>{
        if (config[k].list_hide) return;
        cols.push(config[k])
      })
      if (!this.is_info){
        cols.push({name:'action', label:'操作', width:'175px', type:'action', fixed:'right'});
      }
      return cols;
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>